<template>
  <div class="showMarkMainContent">
    <!-- 展示 -->
    <div class="listContent">
      <div v-if="remarkData.length === 0" class="no-data"></div>
      <div v-else class="listItem" v-for="(item, index) in remarkData" :key="index">
        <div class="info">
          <span class="name">
            {{ item.remarkUserName }}
          </span>
          <span class="time">
            {{ item.remarkTime }}
          </span>
        </div>
        <div class="word">
          <span>{{ item.remarkDescription === '' ? '--' : item.remarkDescription }}</span>
        </div>
      </div>
    </div>
    <div class="sort" v-if="remarkData.length > 4">
      <span class="timeSort" @click="reverseRemarkListFunc">
        <i class="el-icon-sort"></i>
        按时间排序
      </span>
    </div>
    <!-- 输入 -->
    <div class="inputContent" v-show="hasSubmit">
      <div class="line"></div>
      <div class="textarea">
        <el-input
          resize="none"
          ref="textareaRef"
          placeholder="请输入内容"
          v-model="submitRemark.remark"
          @keyup.enter.native="handleConfirm"
          maxlength="2000"
          show-word-limit
        ></el-input>
        <div class="confirm">
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
